Problem

When a visitor lands on an access-restricted post (members-only, paid, tiers), Ghost truncates the content and renders a CTA below it. Currently the truncated paragraph ends abruptly with no visual signal that more content is hidden.

Solution

A single CSS rule that fades out the last visible paragraph via a mask gradient, scoped strictly to restricted posts (those that contain a .gh-post-upgrade-cta element) using the :has() selector.

.gh-content:has(> .gh-post-upgrade-cta) > p:last-of-type {
    -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
}

Why this approach

• Pure CSS, no HTML changes. No new partial, no wrapper div, no JavaScript.
• Strictly scoped. Regular posts are completely unaffected — the rule only matches when a .gh-post-upgrade-cta exists as a direct child of .gh-content.
• Common UX pattern. Medium, Substack, the NYT, etc. all do this. It's become a de-facto standard cue that signals "there's more content behind this paywall".

Browser support

Uses CSS :has() and mask-image. Both are supported in all major browsers since 2023:

• :has(): Chrome 105+, Safari 15.4+, Firefox 121+
• mask-image: universal

Overall browser support in late 2026 is ~98%. Visitors on older browsers see the truncated content normally — graceful degradation, no broken layout.

Opt-out

Theme overriders or end users who don't want this effect can disable it with:

.gh-content > p:last-of-type {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

Replaces previous attempt

This PR was previously a partial-based implementation with several issues (broken file extension, duplicated content, malformed HTML, no i18n). It has been rewritten with the much cleaner CSS-only approach above.